<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<%@ include file="/WEB-INF/views/include/include.jsp" %>
<!DOCTYPE html>
<html lang="zn-ch">
<head>
    <title>用户管理</title>
</head>
<body class="theme-black">
<div class="am-g tpl-g">
    <!-- 顶部 -->
    <jsp:include page="../layout/head.jsp"/>
    <!-- 左侧菜单 -->
    <jsp:include page="../layout/leftMenu.jsp"/>
</div>
<!-- 内容区域 -->
<div class="tpl-content-wrapper">
    <div class="container-fluid am-cf">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
            <ol class="am-breadcrumb" style="margin-bottom: 0;">
                <li>系统管理</li>
                <li>
                    <a href="${ctx }/sys/user" class="active">用户管理</a>
                </li>
                <li>
                    <a href="${ctx }/sys/user/form?mode=1" class="active">用户添加</a>
                </li>
            </ol>
        </div>
    </div>
    <div class="am-u-sm-12 am-u-md-9 am-u-lg-9">
        <form id="form" class="am-form tpl-form-line-form" action="${ctx }/sys/user" method="post">
            <div class="am-form-group">
                <label for="loginName" class="am-u-sm-3 am-form-label">用户名&nbsp;<span
                        class="tpl-form-line-small-title">LoginName</span></label>
                <div class="am-u-sm-9">
                    <input type="text" id="loginName" name="loginName" class="tpl-form-input" minlength="3"
                           maxlength="30" value="${user.loginName}" pattern="^[a-zA-Z0-9_]+$"
                           data-patternMessage="只能输入数字、英文和下划线"
                           data-existenceMessage="用户名已存在" />
                </div>
            </div>
            <div class="am-form-group">
                <label for="realName" class="am-u-sm-3 am-form-label">真实姓名&nbsp;<span
                        class="tpl-form-line-small-title">RealName</span></label>
                <div class="am-u-sm-9">
                    <input type="text" id="realName" name="realName" class="tpl-form-input" minlength="2"
                           maxlength="4" value="${user.realName}" pattern="^[\u4e00-\u9fa5]*$"
                           data-patternMessage="只能输入中文"
                           />
                </div>
            </div>
            <div class="am-form-group">
                <label for="loginPassword" class="am-u-sm-3 am-form-label">密码&nbsp;<span
                        class="tpl-form-line-small-title">Password</span></label>
                <div class="am-u-sm-9">
                    <input type="password" id="loginPassword" name="loginPassword" minlength="8"
                           maxlength="20" class="tpl-form-input" value="${user.loginPassword}" />
                </div>
            </div>
            <div class="am-form-group">
                <label for="confirmPassword" class="am-u-sm-3 am-form-label">确认密码&nbsp;<span
                        class="tpl-form-line-small-title">Confirm</span></label>
                <div class="am-u-sm-9">
                    <input type="password" id="confirmPassword" name="confirmPassword" class="tpl-form-input"
                           data-equal-to="#loginPassword" data-patternMessage="两次输入的密码值不一致" >
                </div>
            </div>
            <div class="am-form-group">
                <label class="am-u-sm-3 am-form-label">选择角色&nbsp;<span
                        class="tpl-form-line-small-title">Role</span></label>
                <div class="am-u-sm-9">
                    <label class="am-checkbox am-success">
                        <input type="checkbox" name="roleIdList" maxchecked="1" value="1" > 角色1
                    </label>
                    <label class="am-checkbox am-success">
                        <input type="checkbox" name="roleIdList" value="2"> 角色2
                    </label>
                </div>
            </div>
            <div class="am-btn-group am-u-sm-9 am-u-sm-offset-3">
                <button type="submit" class="am-btn am-btn-primary am-btn-sm am-radius">提交</button>
                <a href="${ctx}/sys/user" class="am-btn am-btn-primary am-btn-sm am-radius">取消</a>
            </div>
        </form>
    </div>
</div>
</body>
<script type="text/javascript">
    $(function () {
        $('#form').validator({
            onValid: function (validity) {
                $(validity.field).closest('.am-form-group').find('.am-alert').hide();
            },
            onInValid: function (validity) {
                var $field = $(validity.field);
                var $group = $field.closest('.am-form-group');
                var $alert = $group.find('.am-alert');
                // 使用自定义的提示信息 或 插件内置的提示信息
                var msg = $field.data('validationMessage') || this.getValidationMessage(validity);
                if (validity.patternMismatch) {
                    msg = $field.attr('data-patternMessage')
                } else if (validity.customError == 'tooShort') {
                    msg = '至少填写 ' + $field.attr('minlength') + ' 位';
                } else if (validity.customError == 'existence') {
                    msg = $field.attr('data-existenceMessage');
                }

                if (!$alert.length) {
                    $alert = $('<div class="am-alert am-alert-danger am-u-sm-9 am-u-sm-offset-3"></div>').hide().appendTo($group);
                }

                $alert.html(msg).show();
            },
            validate: function (validity) {
                var v = $(validity.field).val();
                // Ajax 验证
                if ($(validity.field).is('#loginName')) {
                    if (validity.valid) {
                        return $.ajax({
                            url: '${ctx}/sys/user/check/loginName/' + v,
                            dataType: 'json'
                        }).then(function (data) {
                            validity.customError = 'existence';
                            validity.valid = data.valid;
                            return validity;
                        }, function () {
                            return validity;
                        });
                    } else {
                        return validity;
                    }
                }
            }
        });
    })

    $('#loginPassword').on('keyup', function () {
        $('#confirmPassword').val('');
        if ($(this).val() == null || $(this).val() == '') {
            $('#confirmPassword').prop('disabled', true);
        } else {
            $('#confirmPassword').prop('disabled', false);
        }
    })
</script>
</html>